<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务表单</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="task_form.css">
</head>
<body>
    <div class="form-container" id="taskFormContainer">
        <div class="form-section">
            <div class="section-header">
                <i class="fas fa-cog"></i>
                <h2>任务配置</h2>
            </div>
            <div class="form-content">
                <div class="form-group">
                    <label class="required">任务名称</label>
                    <input type="text" id="taskName" placeholder="例如：monitor_real_time_logs" value="monitor_real_time_logs">
                    <div class="info-text">唯一标识任务的名称</div>
                </div>
                
                <div class="form-group">
                    <label class="required">执行命令</label>
                    <input type="text" id="taskCommand" placeholder="例如：timeout 60 tail -f /var/log/syslog" value="timeout 60 tail -f /var/log/syslog">
                    <div class="info-text">任务执行的具体命令</div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label>执行模式 <span class="badge badge-common">常用</span></label>
                        <select id="taskMode">
                            <option value="serial">serial (串行)</option>
                            <option value="parallel" selected>parallel (并行)</option>
                        </select>
                        <div class="info-text">默认: serial</div>
                    </div>
                    
                    <div class="form-group">
                        <label>超时时间(秒) <span class="badge badge-common">常用</span></label>
                        <input type="number" id="taskTimeout" value="10">
                        <div class="info-text">默认: 30</div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>主机列表 <span class="badge badge-common">常用</span></label>
                    <div class="array-input" id="hostsList">
                        <div class="item">
                            <input type="text" value="web-server-01">
                            <button><i class="fas fa-times"></i></button>
                        </div>
                        <div class="item">
                            <input type="text" value="api-server-01">
                            <button><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                    <button class="add-item-btn" id="addHost">
                        <i class="fas fa-plus"></i> 添加主机
                    </button>
                    <div class="info-text">默认为所有主机</div>
                </div>
                
                <div class="form-group">
                    <label>期望输出 <span class="badge badge-common">常用</span></label>
                    <div class="array-input" id="expectedList">
                        <div class="item">
                            <input type="text" value="active (running)">
                            <button><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                    <button class="add-item-btn" id="addExpected">
                        <i class="fas fa-plus"></i> 添加期望输出
                    </button>
                    <div class="info-text">输出中包含这些内容表示成功</div>
                </div>
                
                <div class="actions">
                    <button class="modal-btn btn-save" id="saveTask">
                        <i class="fas fa-save"></i> 保存任务
                    </button>
                    <button class="modal-btn btn-cancel" id="cancelTask">
                        <i class="fas fa-times"></i> 取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="task_form.js"></script>
</body>
</html>